<template>
  <div :class="classObj" class="app-wrapper">
    <div class="app-header">
      <div style="margin-left: 30px">
        <img
          style="width: 60px; height: 30px"
          src="@/assets/images/logo.png"
          alt=""
        />
      </div>
      <!-- <div class="right-menu">
        <a-dropdown class="avatar-container" trigger="click">
          <div class="avatar-wrapper">
            <img src="" alt="" />
            <i class="el-icon-caret-bottom" />
          </div>
          <a-dropdown-menu slot="dropdown" class="user-dropdown">
            <a-dropdown-item divided @click.native="logout">
              <span style="display: block">退出登录</span>
            </a-dropdown-item>
          </a-dropdown-menu>
        </a-dropdown>
      </div> -->
    </div>
    <div class="container">
      <div class="menu">
        <a-menu class="el-menu-vertical-demo" @select="handleOpen">
          <a-menu-item v-for="i in routes" :key="i.path" :index="i.path">
            <a-icon type="appstore" />
            <span class="narName">{{ i.name }}</span>
          </a-menu-item>
        </a-menu>
      </div>
      <div class="main-container">
        <!-- <div :class="{ 'fixed-header': fixedHeader }">
          <navbar />
        </div> -->
        <router-view :key="key" />
      </div>
    </div>
  </div>
</template>

<script>
import { Modal } from "ant-design-vue";
import { mapState } from "vuex";
import ResizeMixin from "@/mixin/ResizeHandler";
// 需要后端修改的位置 在这里import layoutname form @/router/routes
export default {
  name: "Home",
  mixins: [ResizeMixin],
  data() {
    return {
      hasLogin: process.env.VITE_HAS_LOGIN === "true",
      menuRoute: [],
    };
  },
  computed: {
    ...mapState({
      name: (state) => state.user.name,
    }),
    routes() {
      const root = this.$router.options.routes.find(
        (item) => item.path === "/"
      );
      console.log(root, "rootroot");
      return root.children;
    },
    sidebar() {
      return this.$store.state.app.sidebar;
    },
    device() {
      return this.$store.state.app.device;
    },
    fixedHeader() {
      return this.$store.state.settings.fixedHeader;
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === "mobile",
      };
    },
    key() {
      return this.$route.path;
    },
  },
  methods: {
    handleLogout() {
      Modal.confirm({
        title: `确定要注销吗？`,
        onOk: async () => {
          this.$router.push({ path: "/login" });
        },
      });
    },
    handleOpen(data) {
      console.log("keyPath", data.key);
      this.$router.push({ path: data.key });
    },
  },
};
</script>

<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #f0f2f5;
  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}
.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}
.app-header {
  display: flex;
  justify-content: space-between;
  align-content: center;
  height: 60px;
  background-color: #040e1b;
  position: relative;
  top: 0;
  left: 0;
  z-index: 9999;
}
.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.mobile .fixed-header {
  width: 100%;
}
.avatar-container {
  position: absolute;
  top: 17px;
  right: 30px !important;
}
.user-dropdown {
  width: 110px;
  position: absolute;
  top: 17px;
  right: 10px;
  z-index: 10000 !important;
}

.container {
  display: flex;
  height: calc(100% - 60px);
  .menu {
    width: 200px;
    background: #fff;
    ::v-deep .ant-menu-item {
      height: 40px;
      line-height: 40px;
      margin-left: -38px;
      padding-left: 15px;
    }
    ::v-deep .ant-menu-item-selected {
      background-color: #ecf5ff;
      color: #409eff;
    }
    ::v-deep .ant-menu-item:hover {
      cursor: pointer;
      color: #409eff;
      background-color: #ecf5ff;
    }
    .narName {
      margin-left: 8px;
      font-size: 16px;
    }
  }
  .main-container {
    flex: 1;
    margin-left: 0 !important;
  }
}
</style>
